<template>
  <el-dialog
    id="bakProjectInquire"
    :title="title"
    :visible.sync="openSheet"
    fullscreen
    :destroy-on-close="true"
    :close-on-click-modal="false"
  >
    <el-descriptions direction="horizontal" :column="24" border>
      <el-descriptions-item :label="$t('serialNumber')" :span="8" content-class-name="label-with-150">{{ `${projectPlanBaseInformation.serial_number}` }}</el-descriptions-item>
      <el-descriptions-item :label="$t('customerName')" :span="8" content-class-name="label-with-150">{{ projectPlanCustomerInformation.customer_name }}</el-descriptions-item>
      <el-descriptions-item :label="$t('customerCode')" :span="8" content-class-name="label-with-150">{{ `${projectPlanCustomerInformation.customer_code || ""}` }}</el-descriptions-item>
      <el-descriptions-item :label="$t('createdUser')" :span="8" content-class-name="label-with-150">{{ `${projectPlanBaseInformation.created}` }}</el-descriptions-item>
      <el-descriptions-item :label="$t('createdDate')" :span="8" content-class-name="label-with-150">{{ `${projectPlanBaseInformation.created_date}` }}</el-descriptions-item>
      <el-descriptions-item :label="$t('customerName')" :span="8" content-class-name="label-with-150">{{ projectPlanCustomerInformation.customer_name }}</el-descriptions-item>
      <el-descriptions-item :label="$t('projectType')" :span="12" content-class-name="label-with-150">{{ `${projectPlanInfoInformation.project_type || ""}` }}</el-descriptions-item>
      <el-descriptions-item :label="$t('customerUrl')" :span="12" content-class-name="label-with-150">{{ projectPlanCustomerInformation.customer_url }}</el-descriptions-item>
      <el-descriptions-item :label="$t('projectScope')" :span="12" content-class-name="label-with-150">{{ projectPlanInfoInformation.scope }}</el-descriptions-item>
      <el-descriptions-item :label="$t('customerProduct')" :span="12" content-class-name="label-with-150">{{ projectPlanCustomerInformation.customer_product }}</el-descriptions-item>
      <el-descriptions-item :label="$t('objectProduct')" :span="12" content-class-name="label-with-150">{{ projectPlanInfoInformation.obj_product }}</el-descriptions-item>
      <el-descriptions-item :label="$t('productForm')" :span="12" content-class-name="label-with-150">{{ projectPlanCustomerInformation.product_form }}</el-descriptions-item>
      <el-descriptions-item :label="$t('customerTarget')" :span="12" content-class-name="label-with-150">{{ projectPlanInfoInformation.customer_target }}</el-descriptions-item>
      <el-descriptions-item :label="$t('factoryNumber')" :span="12" content-class-name="label-with-150">{{ projectPlanCustomerInformation.factory_num }}</el-descriptions-item>
      <el-descriptions-item :label="$t('internalTarget')" :span="24" content-class-name="label-with-150">{{ projectPlanInfoInformation.internal_target }}</el-descriptions-item>
      <el-descriptions-item :label="$t('responsibility')" :span="24" content-class-name="label-with-150">{{ projectPlanInfoInformation.responsibility }}</el-descriptions-item>
      <el-descriptions-item :label="$t('projectPlanName')" :span="16" content-class-name="label-with-150">{{ projectPlanBaseInformation.project_name }}</el-descriptions-item>
      <el-descriptions-item :label="$t('department')" :span="8" content-class-name="label-with-150">{{ projectPlanBaseInformation.department_name }}</el-descriptions-item>
      <el-descriptions-item :label="$t('startDate')" :span="8" content-class-name="label-with-150">{{ projectPlanBaseInformation.start_date }}</el-descriptions-item>
      <el-descriptions-item :label="$t('endDate')" :span="8" content-class-name="label-with-150">{{ projectPlanBaseInformation.end_date }}</el-descriptions-item>
      <el-descriptions-item :label="$t('standardCurrency')" :span="8" content-class-name="label-with-150">{{ projectPlanBaseInformation.standard_curr }}</el-descriptions-item>
    </el-descriptions>
    <!-- 辅助信息 -->
    <div v-for="(items, section) in auxiliarylist" :key="section">
      <div>
        <h4>{{ section }}</h4>
      </div>
      <el-descriptions border>
        <el-descriptions-item v-for="item in items" :key="item.section_item" :label="item.section_item" label-class-name="label-with-240"> {{ item.value }} </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 报价信息 -->
    <el-collapse>
      <el-collapse-item :title="$t('projectQuotaInquireTitle')" name="1">
        <project-quota-info :project-plan-id="projectPlanBaseInformation.id" />
      </el-collapse-item>
    </el-collapse>
    <!-- 维护项目 -->
    <el-collapse>
      <el-collapse-item :title="$t('projectMaintainInquireTitle')" name="1">
        <project-maintain-info :project-plan-id="projectPlanBaseInformation.id" />
      </el-collapse-item>
    </el-collapse>
    <!-- 开发项目 -->
    <el-collapse>
      <el-collapse-item :title="$t('projectDevelopInquireTitle')" name="1">
        <project-develop-info :project-plan-id="projectPlanBaseInformation.id" />
      </el-collapse-item>
    </el-collapse>
    <!-- 项目进度记录 -->
    <el-collapse>
      <el-collapse-item :title="$t('progressInfoTitle')" name="1">
        <project-progress-info :project-plan-id="projectPlanBaseInformation.id" />
      </el-collapse-item>
    </el-collapse>
    <!-- 项目核算履历信息 -->
    <el-collapse>
      <el-collapse-item :title="$t('projectCombineAccountInquire')" name="1">
        <project-combine-account-info :project-plan-id="projectPlanBaseInformation.id" />
      </el-collapse-item>
    </el-collapse>
    <!-- 阶段别预实管理信息 -->
    <el-collapse>
      <el-collapse-item :title="$t('projectCombineStageInquire')" name="1">
        <project-combine-stage-info :project-plan-id="projectPlanBaseInformation.id" />
      </el-collapse-item>
    </el-collapse>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t('close') }}</el-button>
    </div>
    <el-backtop target="#bakProjectInquire" />
  </el-dialog>
</template>

<script>
import { getProjectPlanInfoListApi } from '@/views/projectbase/projectplaninfo/api/projectplaninfo.api';
import { getCommonGroupbySectionApi } from '@/views/projectbase/common/projectplancommon.api'
import { getProjectPlanCustomerListApi } from '@/views/projectbase/projectplancustomer/api/projectplancustomer.api';
import ProjectMaintainInfo from '@/views/project/projectmaintain/reports/projectmaintain-info';
import ProjectDevelopInfo from '@/views/project/projectdevelop/reports/projectdevelop-info';
import ProjectProgressInfo from '@/views/project/projectprogress/components/projectprogress-info';
import ProjectQuotaInfo from '@/views/project/projectquota/reports/projectquota-info';
import ProjectCombineAccountInfo from '@/views/project/projectaccount/reports/projectcombineaccount-info';
import ProjectCombineStageInfo from '@/views/project/projectstage/reports/projectcombinestage-info';

export default {
  components: { ProjectMaintainInfo, ProjectDevelopInfo, ProjectProgressInfo, ProjectQuotaInfo, ProjectCombineAccountInfo, ProjectCombineStageInfo },
  data() {
    return {
      projectPlanBaseInformation: {},
      projectPlanInfoInformation: {},
      projectPlanLawInformation: {},
      projectPlanCustomerInformation: {},
      projectQuotaInformation: {},
      title: undefined,
      openSheet: false,
      loading: false,
      queryparams: {
        projectPlanFK: undefined,
        page: 1,
        page_size: 1000
      },
      infolist: [],
      auxiliarylist: [],
      customList: [],
      projectPlanId: undefined
    };
  },
  computed: {
    labelWidth() {
      return this.$i18n.locale === 'en' ? '150px' : '80px';
    }
  },
  methods: {
    async openSheetDialog(data) {
      this.openSheet = !this.openSheet;
      this.title = this.$t('projectPlanBaseInquireTitle');
      this.projectPlanBaseInformation = data;
      this.projectPlanId = data.id
      this.getProjectPlanInfoList()
      this.getProjectPlanAuxiliaryList()
      this.getProjectPlancustomList()
    },
    cancel() {
      this.openSheet = !this.openSheet;
      this.projectPlanId = 0
      this.projectMaintainList = []
      this.maintainProjectAccountList = []
      this.maintainProjectStageList = []
    },
    // 获取项目计划基础信息表
    async getProjectPlanInfoList() {
      this.loading = true
      this.queryparams.projectPlanFK = this.projectPlanId
      var resp = await getProjectPlanInfoListApi({ ...this.queryparams })
      if (resp.success && resp.data.results.length > 0) {
        this.infolist = resp.data.results[0] // 一个项目计划只能对应一条基础信息
        this.projectPlanInfoInformation = { ...this.infolist } // 将获取的数据赋值给form
      } else {
        this.infolist = []
      }
      this.loading = false
    },
    // 获取项目计划辅助信息
    async getProjectPlanAuxiliaryList() {
      this.loading = true
      this.queryparams.projectPlanFK = this.projectPlanId
      var resp = await getCommonGroupbySectionApi({ projectPlanFK: this.projectPlanId })
      if (resp.success) {
        this.auxiliarylist = resp.data
      } else {
        this.auxiliarylist = []
      }
      this.loading = false
    },
    // 获取客户信息
    async getProjectPlancustomList() {
      this.loading = true
      this.queryparams.projectPlanFK = this.projectPlanId
      var resp = await getProjectPlanCustomerListApi({ ...this.queryparams })
      if (resp.success && resp.data.results.length > 0) {
        this.customList = resp.data.results[0] // 一个项目计划只能对应一条基础信息
        this.projectPlanCustomerInformation = { ...this.customList } // 将获取的数据赋值给form
      } else {
        this.customList = []
      }
      this.loading = false
    }
  }
};
</script>

<style scoped>
@import "~@/views/projectbase/projectcss/project.css";
</style>
